<script setup lang="ts">
import type { MenuPlacement, TooltipPlacement } from "vidstack";
import CaptionSubmenu from "../menus/CaptionSubmenu.vue";
import Menu from "../menus/Menu.vue";
import SettingsIcon from "~icons/media/settings";

defineProps<{
  placement: MenuPlacement
  tooltipPlacement: TooltipPlacement
}>();
</script>

<template>
  <Menu
    :placement="placement"
    :tooltip-placement="tooltipPlacement"
  >
    <template #button>
      <SettingsIcon
        class="h-8 w-8 transform transition-transform duration-200 ease-out group-data-[open]:rotate-90"
      />
    </template>
    <template #content>
      <CaptionSubmenu />
    </template>
    <template #tooltip-content>
      <span>Settings/设置</span>
    </template>
  </Menu>
</template>
